<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
  <div class="execution">
    <!--添加tab切换栏-->
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tabContent">
        <el-tab-pane label="订单详情" name="orderDetail">
          <!--切换订单详情显示的内容-->

          <basic-container>
            <h2 class="io-goods-detail">基础信息</h2>
            <template>
              <el-row class="io-goods-detail basic-information">
                <el-col :span="6">
                  <div class="grid-content bg-purple">销售订单编号：{{topData.salesOrderSn}}</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">客户编号：{{topData.customerSn}}</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">客户名称：{{topData.customerName}}</div>
                </el-col>
                <el-col :span="6">
                  <div
                    class="grid-content bg-purple-light"
                    v-for="item in sales_type"
                    v-if="item.value == topData.salesType"
                  >销售订单类型：{{item.label}}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">其它金额：{{topData.otherAmount}}</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">合计金额：{{topData.sumAmount}}</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">总计金额：{{topData.totalAmount}}</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">优惠金额：{{topData.couponAmount}}</div>
                </el-col>
              </el-row>
              <el-row class="io-goods-detail basic-information">
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">业务人名称:{{topData.linkmanName}}</div>
                </el-col>
                <!-- <el-col :span="6"><div class="grid-content bg-purple-light">合计金额：{{topData.totalAmount}}</div></el-col> -->
                <el-col :span="6">
                  <div class="grid-content bg-purple-light">地址：{{topData.address}}</div>
                </el-col>
              </el-row>
            </template>
          </basic-container>
          <basic-container>
            <h2 class="io-goods-detail">销售订单商品清单</h2>
            <template>
              <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              >
                <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
                <el-table-column label="商品图片" align="center">
                  <template slot-scope="scope">
                    <img :src="scope.row.goodsImg" height="50px" />
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
                <el-table-column label="规格名称" prop="modelName" align="center"></el-table-column>
                <el-table-column label="单位" prop="unit" align="center"></el-table-column>
                <el-table-column label="订单数量" prop="goodsNum" align="center"></el-table-column>
                <el-table-column label="发货单价" prop="dealPrice" align="center"></el-table-column>
                <el-table-column label="小计金额" align="center">
                  <template slot-scope="scope">
                    <span>{{(scope.row.goodsNum * scope.row.dealPrice).toFixed(2)}}</span>
                  </template>
                </el-table-column>
                <!--<el-table-column label="发货金额" prop="goodsAmount" align="center">-->
                <!--</el-table-column>-->
                <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
              </el-table>
              <h2 class="io-goods-detail" style="margin-top: 10px">赠品列表</h2>
              <el-table
                :data="giftData"
                style="width: 100%"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              >
                <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
                <el-table-column label="商品图片" align="center">
                  <template slot-scope="scope">
                    <img :src="scope.row.goodsImg" height="50px" />
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
                <el-table-column label="规格名称" prop="modelName" align="center"></el-table-column>
                <el-table-column label="单位" prop="unit" align="center"></el-table-column>
                <el-table-column label="订单数量" prop="goodsNum" align="center"></el-table-column>
                <el-table-column label="发货单价" align="center">
                  <span>0</span>
                </el-table-column>
                <el-table-column label="小计金额" align="center">
                  <span>0</span>
                </el-table-column>
                <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
              </el-table>

              <h2 class="io-goods-detail" style="margin-top: 10px">促销列表</h2>
              <el-table
                :data="promotionData"
                style="width: 100%"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              >
                <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
                <el-table-column label="商品图片" align="center">
                  <template slot-scope="scope">
                    <img :src="scope.row.goodsImg" height="50px" />
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
                <el-table-column label="规格名称" prop="modelName" align="center"></el-table-column>
                <el-table-column label="单位" prop="unit" align="center"></el-table-column>
                <el-table-column label="订单数量" prop="goodsNum" align="center"></el-table-column>
                <el-table-column label="发货单价" prop="dealPrice" align="center"></el-table-column>
                <el-table-column label="小计金额" align="center">
                  <template slot-scope="scope">
                    <span>{{(scope.row.goodsNum * scope.row.dealPrice).toFixed(2)}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
              </el-table>
            </template>
          </basic-container>
          <basic-container>
            <template>
              <div class="return-btn">
                <el-button type="primary" plain @click="goBack">返回</el-button>
              </div>
            </template>
          </basic-container>
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>
<!-- 采购退货 -->
<script>
import { getDetail } from "@/api/crm/salesorder";
import { mapGetters } from "vuex";
import Util from "@/util/pds/utils";
import { fetchDict } from "@/util/util";
import { goBack } from "../../../util/util";
let cookieUtil = new Util();
export default {
  name: "addpurchaseback",
  data() {
    return {
      activeName: "orderDetail",
      tableData: [],
      topData: "",
      sales_type: [],
      giftData: [],
      promotionData: [],
      salesOrderSn: "",
      customerSn: ""
    };
  },
  created() {
    fetchDict("scm_sales_type", this.sales_type);
    // this.init();
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  beforeRouteEnter(to, from, next) {
    next(
      vm => (
        (vm.salesOrderSn = vm.$route.query.res.salesOrderSn),
        (vm.customerSn = vm.$route.query.res.customerSn)
      )
    );
  },
  // 监听属性
  watch: {
    salesOrderSn: function(newValue, oldValue) {
      // 新值为空时使用已有的值
      this.init(oldValue && !newValue ? oldValue : newValue);
    }
  },
  methods: {
    // 返回按钮
     // 返回按钮
    goBack(time = 1000) {
      goBack(this, time);

    },
    init(salesOrderSn) {
      if (!salesOrderSn) {
        this.goBack();
        return;
      }
      let params = {
        salesOrderSn: salesOrderSn
      };
      getDetail(params).then(response => {
        this.topData = response.data.data;
        this.topData.couponAmount = (
          this.topData.sumAmount +
          this.topData.otherAmount -
          this.topData.totalAmount
        ).toFixed(2);
        this.topData.detailList.forEach(item => {
          switch (item.salesGoodsType) {
            case "1":
              this.tableData.push(item);
              break;
            case "2":
              this.promotionData.push(item);
              break;
            case "3":
              this.giftData.push(item);
              break;
            default:
              break;
          }
        });
      });
    },
    // backup: function() {
    //   this.$router.go(-1);
    // },

    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="scss">
.io-goods-detail {
  margin-bottom: 10px;
}
.settle-accounts {
  text-align: right;
}
.basic-information {
  margin-top: 20px;
  font-weight: inherit;
}
.return-btn {
  height: 100px;
  width: 100%;
  text-align: center;
  line-height: 100px;
}
.tabContent {
  padding-left: 10px;
  .el-tabs__item {
    font-size: 20px;
  }
}
</style>
